<template>
  <div>
    <!-- 货源 2018/2/17 23:56 zhangQ -->
    <Row>
      <i-col :span="24">
        <span>排序</span>
        <RadioGroup v-model="tabParam.msgType" type="button" style="margin-left: 20px;"
                    @on-change="handleSearchProduct">
          <Radio label="">默认</Radio>
          <Radio label="2">供</Radio>
          <Radio label="1">需</Radio>
        </RadioGroup>

        <Form ref="productForm" :model="productForm" inline style="float: right;">
          <span class="lh-32">所在地</span>
          <FormItem>
            <Cascader :data="cityList" change-on-select v-model="localCityId" placeholder="全国"></Cascader>
          </FormItem>
          <span class="lh-32">目的地</span>
          <FormItem>
            <Cascader :data="cityList" change-on-select v-model="needCityId" placeholder="全国"></Cascader>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSearchProduct">查询</Button>
          </FormItem>
        </Form>
      </i-col>
    </Row>

    <tablePage ref="productDemandTab" :api="getProductDemandByPage" :param="tabParam">
      <template slot-scope="props">
        <Table :columns="productColumn" :data="props.data"></Table>
      </template>
    </tablePage>
  </div>
</template>
<script>
  import {getProductDemandByPage} from '@api/frontEnd'
  import tablePage from '@components/table/tablePage.vue'

  export default {
    name: 'sourceOfGoods',
    data () {
      let productColumn = [
        {
          title: '发布时间',
          key: 'sendTime',
          align: 'center',
          sortable: 'custom',
          width: 155,
          render: (h, params) => {
            let sendTime = params.row.sendTime
            return h('Poptip', {
              props: {
                content: sendTime,
                placement: 'top',
                trigger: 'hover'
              }
            }, sendTime)
          }
        }, {
          title: '信息类型',
          align: 'center',
          ellipsis: true,
          width: 120,
          render: (h, params) => {
            const type = params.row.msgType
            if (type === 1) {
              return h('div', [
                h('Tag', {
                  props: {
                    type: 'dot',
                    color: 'blue'
                  }
                }, '需求')
              ])
            } else {
              return h('div', [
                h('Tag', {
                  props: {
                    type: 'dot',
                    color: 'yellow'
                  }
                }, '供给')
              ])
            }
          }
        }, {
          title: '品类',
          key: 'productName',
          align: 'center',
          ellipsis: true,
          width: 100,
          render: (h, params) => {
            let productName = params.row.productName
            return h('Poptip', {
              props: {
                content: productName,
                placement: 'top',
                trigger: 'hover'
              }
            }, productName)
          }
        }, {
          title: '需求量(吨)',
          align: 'center',
          key: 'number',
          render: (h, params) => {
            let thisData = params.row.number
            if (params.row.unit) {
              thisData = params.row.number + params.row.unit
            }
            return h('Poptip', {
              props: {
                content: thisData,
                placement: 'top',
                trigger: 'hover'
              }
            }, thisData)
          }
        }, {
          title: '货物所在地',
          key: 'localCityName',
          align: 'center',
          ellipsis: true,
          width: 110,
          render: (h, params) => {
            let localCityName = params.row.localCityName
            return h('Poptip', {
              props: {
                content: localCityName,
                placement: 'top',
                trigger: 'hover'
              }
            }, localCityName)
          }
        }, {
          title: '目的地',
          key: 'needCityName',
          align: 'center',
          ellipsis: true,
          width: 80,
          render: (h, params) => {
            let needCityName = params.row.needCityName
            return h('Poptip', {
              props: {
                content: needCityName,
                placement: 'top',
                trigger: 'hover'
              }
            }, needCityName)
          }
        }, {
          title: '联系人',
          key: 'userName',
          align: 'center',
          render: (h, params) => {
            let userName = params.row.userName
            return h('Poptip', {
              props: {
                content: userName,
                placement: 'top',
                trigger: 'hover'
              }
            }, userName)
          }
        },
        {
          title: '联系电话',
          key: 'mobile',
          align: 'center',
          render: (h, params) => {
            let mobile = params.row.mobile
            if (mobile === '***********') {
              mobile = '18130899820'
            }
            return h('Poptip', {
              props: {
                content: mobile,
                placement: 'top',
                trigger: 'hover'
              }
            }, mobile)
          }
        }
      ]
      let productForm = {
        local_city_id: null,
        need_city_id: null,
        product_type: 2,
        isMine: 0,
        page: 1,
        pageSize: 10,
        msg_type: null
      }
      let localCityId = ['']
      let needCityId = ['']
      let tabParam = {
        productType: 2,
        msgType: '',
        localCityId: '',
        needCityId: '',
        isMine: 0
      }
      let datas = {
        getProductDemandByPage,
        productColumn,
        productForm,
        localCityId,
        needCityId,
        tabParam
      }
      return datas
    },
    props: {
      // 城市列表
      cityList: {
        type: Array,
        default () {
          return []
        }
      }
    },
    methods: {
      /**
       * TODO(查询所有货源)
       * @param
       * @auther zhangQ
       * @date 2018/2/18 0:07
       **/
      handleSearchProduct () {
        this.tabParam.localCityId = this.localCityId[this.localCityId.length - 1]
        this.tabParam.needCityId = this.needCityId[this.needCityId.length - 1]
        this.$refs['productDemandTab'].dataRefresh()
      }
    },
    components: {tablePage}
  }
</script>
<style scoped>
  .lh-32 {
    line-height: 32px;
    margin-right: 5px;
  }
</style>
